<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02 v-if</title>
</head>
<body>
  <div id="app">
    <input type="text" v-model="grade">
    <div v-if="grade >= 90">优</div>
    <div v-else-if="grade >= 80">良</div>
    <div v-else-if="grade >= 70">中</div>
    <div v-else-if="grade >= 60">差</div>
    <div v-else>不及格</div>

    <h5>v-show</h5>
    <div v-show="grade >= 90">优</div>
    <div v-show="grade >= 80 && grade < 90">良</div>
    <div v-show="grade >= 70 && grade < 80">中</div>
    <div v-show="grade >= 60 && grade < 70">差</div>
    <div v-show="grade < 60">不及格</div>
  </div>
</body>
<script src="lib/vue.js"></script>
<script>
  new Vue({
    data: {
      grade: 88
    }
  }).$mount('#app')
</script>
</html>